<template>
  <div class="photoinfo-container">
    <h3>{{ infoList.title }}</h3>
    <div class="subtitle">
        <span>发表时间：{{ infoList.add_time | dateFormat("YYYY-MM-DD HH:mm:ss")  }}</span>
        <span>点击：{{ infoList.click }}次</span>
    </div>
    
    <hr>

    <!-- 缩略图  使用vue-preview-->
    
    <div class="thumbs">
    
        <vue-preview :slides="list"  @close="handleClose" ></vue-preview>

    </div>
    
    
    <!-- 缩略图 end -->

    <div class="content" v-html="infoList.content"></div>

    <photobox :id="id">  </photobox>
  </div>
</template>

<script>

import comment from '../subcomponents/comment.vue'

export default {
    data(){

        return{
            id: this.$route.params.id,
            infoList: {},
            list: []
        }
    },
    created(){

        this.getPhotoInfo()

        this.getPrePhoto()
    },
    methods: {

        handleClose () {  //加上这个方法
                console.log('close event')
            },

        getPhotoInfo(){

            this.$http.get('api/getimageInfo/' + this.id).then(result=>{

                if(result.body.status === 0){

                    this.infoList = result.body.message[0]

                }

            })

        },

        getPrePhoto(){

            this.$http.get('api/getthumimages/' + this.id).then(result =>{

                if(result.body.status === 0){
                    
                    //用foreach给数组添加相应的属性
                    result.body.message.forEach(item => {

                        item.w = 600

                        item.h = 400

                        item.msrc = item.src

                    });

                    this.list = result.body.message

                }

            })

        }

    },
    components: {
        "photobox" : comment
    }
};
</script>

<style lang="scss" scoped>
    .photoinfo-container{
        h3 {
            font-size: 14px;
            color: lightseagreen;
            text-align: center;
            margin: 10px 0;
        }

        .subtitle{
            display: flex;
            justify-content: space-between;
            font-size: 12px;
        }

        hr{
            padding: 0;
            margin: 0;
        }

        .content{
            font-size: 12px;
            color: gray;
            line-height: 30px;
        }

        .thumbs{
            margin: 10px 0;
           /deep/ .my-gallery{    //需要使用深度选择器，不然样式不能加载
                
                display: flex;
                flex-wrap: wrap;  //默认换行

                figure{
                    width: 30%;
                    margin: 4px;
                   
                    img{
                        width: 100%;
                        border-radius: 5px;
                        box-shadow: 0 0 4px gray;
                    }
                }
            }

        }

    }
</style>